<template>
	<view class="credit-list">
		<view class="credit-item" v-for="item of creditList" :key="item.id">
			<view class="type">
				{{typeOptions[item.type] || ''}}
			</view>
			<view class="date">
				{{item.createdAt}}
			</view>
			<view class="right-text">
				{{item.type < 20 ? '+' : '-'}}{{item.credits}}
			</view>
		</view>
		<view class="credit-item show-more" @click="showMore">
			{{hasMore?'查看更多':'没有更多记录'}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "credit-list",
		props: {
			creditList: {
				type: Array,
				default: () => {
					[]
				}
			},
		},
		data() {
			return {
				typeOptions: {
					'10': '新增用户赠送',
					'11': '充值',
					'20': '生成图片',
				},
				hasMore:true
			};
		},
		methods:{
			showMore(){
				this.$emit('showMoreCredit')
			}
		}
	}
</script>

<style lang="scss">
	.credit-list {
		width: calc(100% - 46rpx);
		margin-left: 23rpx;

		.credit-item {
			height: 70rpx;
			width: 100%;
			overflow: hidden;
			background: #F1F1F1;
			border-bottom: 1rpx solid #646464;
			box-sizing: border-box;
			display: flex;
			justify-content: start;
			line-height: 70rpx;
			&:last-child {
				border-bottom: none;
			}

			.type {
				color: #3D3D3D;
				margin-left: 24.5rpx;
				font-size: 31.5rpx;
				width: 220rpx;
			}

			.date {
				color: #3D3D3D;
				font-size: 24.53rpx;
			}

			.right-text {
				margin-right: 24.5rpx;
				text-align: right;
				flex-grow: 1;
				font-size: 31.5rpx;
				font-weight: bold;
				font-size: 28rpx;
			}
			&.show-more{
				justify-content: center;
			}
		}
	}
</style>